<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <div class="mapwrap">
      <div id="container"></div>
      <div class="r-result">
        <input
          class="el-input__inner"
          type="text"
          id="suggestId"
          value=""
          placeholder="请输入地名搜索"
        />
      </div>
      <div
        id="searchResultPanel"
        style="
          border: 1px solid #c0c0c0;
          width: 150px;
          height: auto;
          display: none;
        "
      ></div>
    </div>
    <CustomDialog
      :dialogVisible="dialogVisible"
      :width="customDialogWidth"
      :top="top"
    >
      <ItemWrap
        :title="customDialogTitle"
        :height="customDialogHeight"
        :rightText="rightText"
        :type="1"
        :rightTextStyle="{ right: '40px', top: '18px', color: '#409EFF' }"
        @search-history="searchHistory"
        backgroundColor="rgba(150, 224, 241, 0.3)"
        titleClass="resetClass"
      >
        <template v-slot:RightIcon>
          <span class="el-icon-close close-btn" @click="handleClosed"></span>
        </template>
        <component
          :is="currentComponents"
          :currentComponentData="currentComponentData"
          :table-height="tableHeight"
        ></component>
      </ItemWrap>
    </CustomDialog>
  </div>
</template>

<script>
import BaiMapGL from "./ddd";
import blueIcon from "../../assets/img/market_blue.png";
import redIcon from "../../assets/img/market_red.png";
import StationInformation from "../station-information/station-information.vue";
import StationInformationHistory from "../station-information/station-information-history.vue";

export default {
  components: {
    StationInformation,
    StationInformationHistory,
  },

  data() {
    return {
      map: null,
      dialogVisible: false,
      currentComponents: 'StationInformation',
      currentComponentData: {},
      customDialogWidth: '35%',
      customDialogHeight: '350px',
      customDialogTitle: '测站信息',
      rightText: '历史数据',
      top: '12%',
      fullscreen: false,
      tableHeight: 300,
      maptitle: "站点数据",
    };
  },
  created() {},

  mounted() {
    this.getData();
  },
  watch: {
    fullscreen() {
      if (this.fullscreen) {
        this.changeHeight();
      } else {
        this.tableHeight = this.dialogTable[this.currentComponents] || 300;
      }
    },
  },
  methods: {
    isFullscreen() {
      this.fullscreen = !this.fullscreen;
    },
    getData() {
      BaiMapGL.init("dBI6Lv2deu1eeI8uNewXtErMFKBIN48u").then(() => {
        var map = (this.map = new BMapGL.Map("container")); // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
        this.searchAddressInit();
        this.addMapMarket();
      });
    },

    searchAddressInit() {
      const map = this.map;
      var ac = new BMapGL.Autocomplete({ //建立一个自动完成的对象
        input: "suggestId",
        location: map,
      });

      ac.addEventListener("onhighlight", (e) => {
        //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str =
          "FromItem<br />index = " +
          e.fromitem.index +
          "<br />value = " +
          value;

        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str +=
          "<br />ToItem<br />index = " +
          e.toitem.index +
          "<br />value = " +
          value;
        this.getId("searchResultPanel").innerHTML = str;
      });

      var myValue;
      ac.addEventListener("onconfirm", (e) => {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        this.getId("searchResultPanel").innerHTML =
          "onconfirm<br />index = " +
          e.item.index +
          "<br />myValue = " +
          myValue;

        this.setPlace(myValue);
      });
    },

    setPlace(myValue) {
      const map = this.map;
      map.clearOverlays(); //清除地图上所有覆盖物
      function myFun() {
        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        map.addOverlay(new BMap.Marker(pp)); //添加标注
      }
      var local = new BMapGL.LocalSearch(map, {
        //智能搜索
        onSearchComplete: myFun,
      });
      local.search(myValue);
    },

    getId(id) {
      return document.getElementById(id);
    },

    addMapMarket() {
      const points = [
        { point: [116.404, 39.925], type: "1" },
        { point: [116.404, 39.915], type: "0" },
        { point: [116.395, 39.935], type: "1" },
        { point: [116.415, 39.931], type: "1" },
      ];
      const myIcon1 = new BMapGL.Icon(blueIcon, new BMapGL.Size(25, 30));
      const myIcon2 = new BMapGL.Icon(redIcon, new BMapGL.Size(25, 30));
      points.forEach((data) => {
        const map = this.map;
        const marker = new BMapGL.Marker(
          new BMapGL.Point(data.point[0], data.point[1]),
          {
            icon: data.type == "1" ? myIcon1 : myIcon2,
          }
        );
        map.addOverlay(marker);
        marker.addEventListener("click", (e) => this.overlayStyle(e, data));
      });
    },

    overlayStyle(e, data) {
      this.dialogVisible = true;
      this.currentComponents = "StationInformation";
      this.currentComponentData = data;
    },

    handleClosed() {
      this.dialogVisible = false;
      this.currentComponents = "StationInformation";
      this.customDialogWidth = "35%";
      this.customDialogHeight = "350px";
      this.customDialogTitle = "测站信息";
      this.rightText = "历史数据";
    },

    searchHistory() {
      this.currentComponents = "StationInformationHistory";
      this.customDialogWidth = "40%";
      this.customDialogHeight = "450px";
      this.customDialogTitle = "测站历史数据";
      this.rightText = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  // margin-bottom: 20px;
  width: 100%;
  height: 100%;
  .r-result {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
    input {
      height: 35px;
      line-height: 35px;
      padding-right: 30px;
      width: 200px;
    }
  }

  .mapwrap {
    height: 100%;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    #container {
      height: 100%;
      width: 100%;
    }
  }
}
:deep {
  .el-descriptions__header {
    margin-bottom: 4px;
  }
  .el-descriptions__title {
    font-weight: 500;
  }
  .el-descriptions-item__cell {
    color: #333;
    font-size: 14px;
  }
}
.close-btn {
  color: #999;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
}

</style>
